<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { SidebarTrigger } from '@/components/ui/sidebar'
import PersonInformation from '@/components/PersonInformation.vue'
import worldImage from '@/assets/world.png'
import world2Image from '@/assets/world2.jpeg'
import world3Image from '@/assets/world3.jpg'

// 轮播图数据
const currentSlide = ref(1) // 从1开始，因为0是副本
const isTransitioning = ref(true)
const slides = ref([
  { id: 1, image: worldImage, title: '论坛首页', description: '欢迎来到我们的论坛社区' },
  { id: 2, image: world2Image, title: '热门讨论', description: '发现最新的热门话题' },
  { id: 3, image: world3Image, title: '精彩内容', description: '探索更多精彩内容' }
])

// 扩展的slides数组，用于无限循环
const extendedSlides = ref([
  slides.value[slides.value.length - 1], // 最后一张的副本
  ...slides.value,
  slides.value[0] // 第一张的副本
])

let autoSlideInterval = null

// 切换到指定幻灯片
const goToSlide = (index) => {
  isTransitioning.value = true
  currentSlide.value = index + 1 // 因为有前置副本，所以+1
}

// 下一张
const nextSlide = () => {
  if (!isTransitioning.value) return
  
  currentSlide.value++
  
  // 如果到达最后一张副本，瞬间跳回第一张真实图片
  if (currentSlide.value >= extendedSlides.value.length - 1) {
    setTimeout(() => {
      isTransitioning.value = false
      currentSlide.value = 1
      setTimeout(() => {
        isTransitioning.value = true
      }, 50)
    }, 500)
  }
}

// 上一张
const prevSlide = () => {
  if (!isTransitioning.value) return
  
  currentSlide.value--
  
  // 如果到达第一张副本，瞬间跳回最后一张真实图片
  if (currentSlide.value <= 0) {
    setTimeout(() => {
      isTransitioning.value = false
      currentSlide.value = extendedSlides.value.length - 2
      setTimeout(() => {
        isTransitioning.value = true
      }, 50)
    }, 500)
  }
}

// 自动轮播
const startAutoSlide = () => {
  autoSlideInterval = setInterval(() => {
    nextSlide()
  }, 4000)
}

// 停止自动轮播
const stopAutoSlide = () => {
  if (autoSlideInterval) {
    clearInterval(autoSlideInterval)
    autoSlideInterval = null
  }
}

onMounted(() => {
  startAutoSlide()
})

onUnmounted(() => {
  stopAutoSlide()
})
</script>

<template>
  <div class="page">
    <header class="header">
      <SidebarTrigger />
      <h1>首页</h1>
      <!-- <PersonInformation /> -->
    </header>
    <main class="content">
      <div class="carousel-container" @mouseenter="stopAutoSlide" @mouseleave="startAutoSlide">
        <div class="carousel-wrapper">
          <div 
            class="carousel-slides" 
            :class="{ 'no-transition': !isTransitioning }"
            :style="{ transform: `translateX(-${currentSlide * 20}%)` }"
          >
            <div 
              v-for="(slide, index) in extendedSlides" 
              :key="`${slide.id}-${index}`" 
              class="carousel-slide"
            >
              <img :src="slide.image" :alt="slide.title" class="slide-image" />
              <div class="slide-overlay">
                <h3 class="slide-title">{{ slide.title }}</h3>
                <p class="slide-description">{{ slide.description }}</p>
              </div>
            </div>
          </div>
          
          <!-- 导航按钮 -->
          <button class="carousel-btn carousel-btn-prev" @click="prevSlide">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="15,18 9,12 15,6"></polyline>
            </svg>
          </button>
          <button class="carousel-btn carousel-btn-next" @click="nextSlide">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="9,18 15,12 9,6"></polyline>
            </svg>
          </button>
        </div>
        
        <!-- 指示器 -->
        <div class="carousel-indicators">
          <button 
            v-for="(slide, index) in slides" 
            :key="index"
            class="indicator"
            :class="{ active: (currentSlide - 1) === index || (currentSlide === 0 && index === slides.length - 1) || (currentSlide === extendedSlides.length - 1 && index === 0) }"
            @click="goToSlide(index)"
          ></button>
        </div>
      </div>
      <div class="announcements">
        <div class="announcement-card">
          <h3>📢 系统公告</h3>
          <p>欢迎来到我们的凡特斯兰论坛！请遵守社区规则，友善交流。</p>
        </div>
        <div class="announcement-card">
          <h3>🎉 新功能上线</h3>
          <p>新增了黑夜模式功能，点击侧边栏的主题切换按钮体验。</p>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.page {
  min-height: 100vh;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.dark .page {
  background-color: #111318;
}

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid hsl(var(--sidebar-border));
  background: hsl(var(--sidebar-background));
  color: hsl(var(--sidebar-foreground));
}

.header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--sidebar-foreground));
}

.content {
  flex: 1;
  padding: 2rem;
  background-color: hsl(var(--background));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  min-height: calc(100vh - 4rem);
  width: 100%;
}

.dark .content {
  background-color: #14151d;
}

/* 轮播图容器 */
.carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.carousel-wrapper {
  position: relative;
  width: 560px;
  height: 336px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.carousel-slides {
  display: flex;
  width: 500%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-slides.no-transition {
  transition: none;
}

.carousel-slide {
  position: relative;
  width: 20%;
  height: 100%;
  flex-shrink: 0;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 1.5rem;
  text-align: center;
}

.slide-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.slide-description {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.9;
}

/* 导航按钮 */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 2;
  font-size: 18px;
  color: #333;
}

.carousel-btn:hover {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark .carousel-btn {
  color: #000;
}

.dark .carousel-btn:hover {
  color: #000;
}

.carousel-btn-prev {
  left: 10px;
}

.carousel-btn-next {
  right: 10px;
}

/* 指示器 */
.carousel-indicators {
  display: flex;
  gap: 0.5rem;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: hsl(var(--sidebar-border));
  cursor: pointer;
  transition: all 0.2s;
}

.indicator.active {
  background: hsl(var(--sidebar-primary));
  transform: scale(1.2);
}

.indicator:hover {
  background: hsl(var(--sidebar-primary));
  opacity: 0.8;
}

.announcements {
  display: flex;
  gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 900px;
  width: 100%;
}

.announcement-card {
  flex: 1;
  min-width: 350px;
  max-width: 450px;
  padding: 1.5rem 2rem;
  background-color: hsl(var(--sidebar-background));
  border: 1px solid hsl(var(--sidebar-border));
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.announcement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: hsl(var(--sidebar-primary));
}

.announcement-card h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.announcement-card p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  font-size: 0.9rem;
}

.link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: hsl(var(--sidebar-primary));
  color: hsl(var(--sidebar-primary-foreground));
  text-decoration: none;
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--sidebar-border));
  transition: all 0.2s;
}

.link:hover {
  background: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
  border-color: hsl(var(--sidebar-primary));
}
</style>